// <TheDateTime :startdate.sync='startdate'  :enddate.sync='enddate'  ></TheDateTime>
<template>
  <el-date-picker
    v-model="valueCopy"
    :type="type"
    :format="format"
    :value-format="valueFormat"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    v-bind="$attrs"
    :clearable="clearable"
    v-on="$listeners"
    @change="changeDate"
  />
</template>
<script>
export default {
  props: {
    startdate: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: true
    },
    enddate: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'datetimerange'
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    }
  },
  data() {
    return {
      valueCopy: '',
    }
  },
  watch: {
    startdate: {
      deep: true,
      immediate: true,
      handler: function(val, oldVal) {
        if (val && val != oldVal) {
          this.initDate()
        }
      }
    },
    enddate: {
      deep: true,
      immediate: true,
      handler: function(val, oldVal) {
        if (val && val != oldVal) {
          this.initDate()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    initDate() {
      this.valueCopy = [this.startdate, this.enddate]
    },
    changeDate(val) {
      if (val) {
        const [startdate = '', enddate = ''] = val
        this.$emit('update:enddate', enddate)
        this.$emit('update:startdate', startdate)
      } else {
        this.$emit('update:enddate', '')
        this.$emit('update:startdate', '')
      }
    }

  }
}
</script>
<style scoped lang="scss">
</style>
